<template>
    <rx-layout>
        <div slot="header" style="display: flex">
            <div class="refererEdit-header">{{this.i18n('list.comment','水印配置')}}</div>
            <a-button icon="save" @click="saveProps" type="primary">{{$ti18('rxForm.saveBtn','保存')}}</a-button>
        </div>
        <div slot="center">
            <div class="RefererEdit-common">
                <div>
                    <a-form :form="form">
                        <a-row :span="24">
                            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.isWatermark','开启水印')">
                                <a-switch v-model="configs.isWatermark" @change="initWatermark"/>
                            </a-form-item>
                            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.field','选择字段')">
                                <a-select :placeholder="i18n('msa.fieldInfo','请选择字段')"
                                          key="ruleType"
                                          v-model="configs.typeKey"
                                          :getPopupContainer="p=>p.parentNode"
                                          @change="handleChange"
                                          style="width: 150px">
                                    <a-select-option v-for="type in typeData" :value="type.key"
                                                     :key="type.key">{{type.text}}
                                    </a-select-option>
                                </a-select>
                            </a-form-item>
                            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.content','水印内容')">
                                <a-input :maxLength="70" :placeholder="i18n('form.content','水印内容','configure')" v-model="configs.content" @change="initWatermark"/>
                            </a-form-item>
                            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.fontSize','字体大小')">
                                <a-input-number v-model="configs.fontSize"
                                                :min="10" :max="40" @change="initWatermark"/>
                            </a-form-item>
                            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.color','选择颜色')">
                                <a-input type="color" :placeholder="i18n('form.color','选择颜色')" v-model="configs.colorText"
                                         @change="initWatermark"/>
                            </a-form-item>
                            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.transparency','选择透明度')">
                                <a-slider id="test" v-model="configs.colorSlider" :min="0" :max="1" :step="0.01" @change="initWatermark"/>
                            </a-form-item>
                            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.rotate','旋转角度')">
                                <a-select :placeholder="i18n('form.rotate','旋转角度','select')"
                                          key="6"
                                          v-model="configs.rotate"
                                          :getPopupContainer="p=>p.parentNode"
                                          @change="initWatermark"
                                          style="width: 150px">
                                    <a-select-option v-for="rotate in rotateData" :value="rotate.key"
                                                     :key="rotate.key">{{rotate.text}}
                                    </a-select-option>
                                </a-select>
                            </a-form-item>
                            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.widthVal','背景宽度')">
                                <a-input-number v-model="configs.widthVal"
                                                :min="50" :max="600" @change="initWatermark"/>
                            </a-form-item>
                            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.heightVal','背景高度')">
                                <a-input-number v-model="configs.heightVal"
                                                :min="50" :max="600" @change="initWatermark"/>
                            </a-form-item>
                        </a-row>
                    </a-form>
                </div>
                <div>
                    <div class="container-head">{{i18n('form.preview','效果预览')}}</div>
                    <div class="navbar" ref="container">
                        <img src="@/image/Watermark.png"></img>
                    </div>
                </div>
            </div>
        </div>
    </rx-layout>
</template>

<script>
    import SysWaterMarkApi from '@/api/system/core/sysWaterMark';
    import {BaseForm, RxDiaog, Util,WaterMark} from "@lowcode/jpaas-common-lib";
    import userState from "@/assets/js/userState";

    export default {
        name: "RefererEdit",
        mixins: [BaseForm, userState],
        data() {
            return {
                labelCol: {span: 5},
                wrapperCol: {span: 19},
                configs: {
                    typeKey: "",
                    isWatermark: 'false',
                    fontSize: 30,
                    content: "",
                    widthVal: 170,
                    heightVal: 170,
                    rotate: "30",
                    colorText:"",
                    colorVal:"",
                    colorSlider:"0.20"
                },
                typeData: [
                    {
                        key: "deptName",
                        text: this.i18n('form.deptName','主部门')
                    },
                    {
                        key: "account",
                        text: this.i18n('form.account','用户账号')
                    },
                    {
                        key: "fullName",
                        text: this.i18n('form.fullName','用户名')
                    },
                    {
                        key: "mobile",
                        text: this.i18n('form.mobile','手机号')
                    },
                    {
                        key: "email",
                        text: this.i18n('form.email','邮箱')
                    }
                ],
                rotateData: [
                    {
                        key: "0",
                        text: this.i18n('form.horizontal','水平')
                    },
                    {
                        key: "30",
                        text: this.i18n('form.clockwise3','顺时针30°')
                    },
                    {
                        key: "60",
                        text: this.i18n('form.clockwise6','顺时针60°')
                    },
                    {
                        key: "90",
                        text: this.i18n('form.plummet','垂直向下')
                    },
                    {
                        key: "-30",
                        text: this.i18n('form.anticlockwise3','逆时针30°')
                    },
                    {
                        key: "-60",
                        text: this.i18n('form.anticlockwise6','逆时针60°')
                    },

                ],
                waterMarkPkId:""
            }
        },
        created() {
            this.getWaterMarkConfig();
        },
        methods: {
            i18n(name,text,key){
                return this.$ti18(name,text,"SysWaterMark",key);
            },
            initWatermark() {
                let rgbJson=Util.hexToRgb(this.configs.colorText);
                this.configs.colorVal=
                    "rgb("+rgbJson.r+","+rgbJson.g+","+rgbJson.b+","+this.configs.colorSlider+")";
                //计算旋转角度参数
                if (!this.configs.rotate) {
                    this.configs.rotate = 30;
                }
                var contentVal = "{fullName}({account})";
                if (this.configs.content) {
                    var reg = /\{\s*(.+?)\s*\}/g;
                    var userConfig = this.user;
                    contentVal = this.configs.content.replace(reg, function (a, b) {
                        return userConfig[b];
                    });
                }
                //添加水印
                WaterMark.setByParams(contentVal, this.$refs.container, this.configs);
            },
            handleChange(value) {
                this.configs.content = this.configs.content + "{" + value + "}";
                this.initWatermark();
            },
            getWaterMarkConfig() {
                let self_ = this;
                SysWaterMarkApi.getWaterMarkConfig().then(res => {
                    var data = res.data;
                    if (!data) {
                        return;
                    }
                    self_.waterMarkPkId=data.pkId;
                    let configs=JSON.parse(data.contFig);
                    self_.configs = {...self_.configs, ...configs};
                    self_.mdl = Object.assign(self_.configs);
                    self_.form.setFieldsValue(self_.mdl);
                    this.initWatermark();
                });
            },
            //保存配置
            saveProps: function () {
                let saveJson={
                    contFig:JSON.stringify(this.configs)
                }
                if(this.waterMarkPkId){
                    saveJson.id=this.waterMarkPkId;
                }
                SysWaterMarkApi.save(saveJson);
            }
        }
    }
</script>

<style scoped>
    .navbar {
        margin-top: 20px;
        width: 756px;
        padding-right: 20px;
        height: 688px;
        overflow: hidden;
    }

    .navbar img {
        width: 736px;
        height: 688px;
    }

    .RefererEdit-common {
        display: flex;
        height: 100%;
    }

    .RefererEdit-common > div:nth-child(1) {
        flex: 1;
    }

    .RefererEdit-common > div:nth-child(2) {
        width: 756px;
        height: 100%;
        padding: 20px;
        overflow: hidden;
        background: #F0F2F5;
    }

    .container-head {
        color: #303030;
        font-size: 16px;
    }

    .refererEdit-common {
        display: flex;
        margin-bottom: 10px;
    }

    .refererEdit-common i {
        font-size: 18px;
        margin-right: 5px;
        margin-top: 7px;
    }

    .refererEdit-common input {
        flex: 1;
    }

    .refererEdit-center-header {
        display: flex;
        border-bottom: dashed 1px #dedede;
        height: 50px;
        line-height: 50px;
        font-size: 15px;
    }

    .refererEdit-center-header > div:nth-child(1) {
        color: #303030;
        flex: 1;
    }

    .refererEdit-center-header > div:nth-child(2) {
        color: #f94765;
        font-size: 15px;
    }

    .refererEdit-center-header > div:nth-child(2) i {
        margin-left: 5px;
        font-size: 18px;
    }

    .refererEdit-center-header > div:nth-child(1) i {
        margin-right: 5px;
        color: #303030;
        font-size: 17px;
    }

    .refererEdit-center {
        display: flex;
    }

    .refererEdit-center > div:nth-child(1) {
        margin-right: 10px;
    }

    .refererEdit-header {
        flex: 1;
        font-size: 16px;
        line-height: 30px;
        color: #101010;
        margin-left: 10px;
    }

    .aButton {
        margin-right: 10px;
        margin-bottom: 10px;
    }

    .erroUrlClass {
        color: red;
        display: block;
        font-size: 11px;
    }
</style>